I have a Critical Angle calculator as a ReactJs Component. But I am getting this warning upon clicking on the Calculate button: The specified value "Result" cannot be parsed or is out of range. Can someone point out the error?The code for the Component is mentioned below:
const CriticalAngle = () => {
const [n1, setN1] = useState(null);
const [n2, setN2] = useState(null);
const [result, setResult] = useState(null);
const calcResult=()=>{
setResult(57.29578*Math.asin(n2/n1));
}
return (
<>
<Form>
<Form.Group className="mb-4">
<Form.Label>Refractive Index of Incident Medium(Denser Medium)</Form.Label>
<Form.Control
type="number"
placeholder="Enter the value of n1"
onChange={(e) => setN1(Number(e.target.value))}
value={n1 === null ? "" : n1}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Refractive Index of Refractive Medium(Rarer Medium)</Form.Label>
<Form.Control
type="number"
placeholder="Enter the value of n2"
onChange={(e) => setN2(Number(e.target.value))}
value={n2 === null ? "" : n2}
/>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label>Critical Angle</Form.Label>
<Form.Control
type="number"
disabled="true"
value={result === null ? "Result" : result}
/>
</Form.Group>
</Form>
<div className="button-custom-grp">
<Button variant="primary" onClick={calcResult}>
Calculate
</Button>
</div>
</>
)
}
Well, I don't know what those tags are, but here is my guess...
The critical angle's control is marked as type="number", hence it doesn't like values which are not numeric, like the string "Result" is.
Instead, you could try something like this. I used a Form.Label tag to wrap the "Result" string, but I think there's something better.
<Form.Group className="mb-4">
<Form.Label>Critical Angle</Form.Label>
{result === null
? (
<Form.Label>Result</Form.Label>
) : (
<Form.Control
type="number"
disabled="true"
value={result === null ? "Result" : result}
/>
)
}
</Form.Group>
I can't help more than this.